<template>
	<view class="content">
		<view class="title">支付金额</view>
		<input class="uni-input" type="number" focus placeholder="请输入支付金额" v-model="money" @focus="clear"/>
		<view class="prices">
			<view class="price-item" @click="selectMoney(10)">10元</view>
			<view class="price-item" @click="selectMoney(20)">20元</view>		
		</view>
		<view class="prices">
			<view class="price-item" @click="selectMoney(30)">30元</view>
			<view class="price-item" @click="selectMoney(50)">50元</view>			
		</view>
		<view class="btn" @click="pay">支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: 0,
				ordersn:''
			}
		},		
		onLoad(options){
			if (!options.ordersn) {
				uni.showToast({
					title: '参数信息有误',
					icon: 'none'
				})
			}
		},
		methods: {
			selectMoney(money){
				this.money = money
			},
			clear(){
				this.money=''
			},
			pay(){						
				location.href = 'https://www.chuandaolundu.com/wxpay/mobile/uniapp_scenepay?money='+this.money+'&ordersn='+this.ordersn;
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;	
		
	}

	.title {
		margin: 40rpx;
		font-weight: bold;
		color: #404040;
		font-family: '微软雅黑';
	}
	.uni-input{
		margin-left: 40rpx;
		margin-right: 40rpx;
		border: 2rpx solid #ecedee;		
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
	.prices{
		display: flex;
		flex-direction: row;	
		justify-content:space-between;
		margin-left: 40rpx;
		margin-top:40rpx ;
		margin-right: 40rpx;
		color: #404040;
	}
	.price-item{
		width: 47%;		
		height: 150rpx;
		line-height: 150rpx;
		text-align: center;
		font-size: 36rpx;
		background-color: #F3F4F6;
	}
	.btn{
		margin:80rpx;
		background-color: red;
		border-radius: 50rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: white;
	}
</style>